<template>
	<view class="pending-orders">
		<view class="box">
			<view class="address">
				<view class="address_map">
					<view class="code">
						{{detailObj.num}}
					</view>
					<view class="code_title">
						取货码
					</view>
					<view class="map">
						<image style="width: 100%; height: 100%;" src="/static/img/map.png" mode=""></image>
					</view>
				</view>
				<view class="pick-up_address">
					<view class="pick-up">
						取件地址
					</view>
					<view class="ads">
						{{detailObj.barArea}}
					</view>
				</view>
				<view class="shipping_address">
					<view class="shipping">
						配送地址
					</view>
					<view class="ads">
						{{detailObj.userAddrVO.addr}}
					</view>
					<view class="user">
						<view class="info">
							<span>{{detailObj.userAddrVO.consignee}}</span>
							<span>{{detailObj.userAddrVO.mobile}}</span>
						</view>
						<img style="width: 60rpx; height: 60rpx;" src="@/static/img/phone.png" alt="" />
					</view>
				</view>
			</view>
			<view class="shop">
				<view class="shop_title">
					商品信息
				</view>
				<view class="shop_content">
					<img style="width: 150rpx; height: 150rpx; display: block;" src="@/static/img/avatar.png" alt="" />
					<view style="width: 76%; display: flex; flex-direction: column; justify-content: space-between;">
						<view class="">
							{{detailObj.barSpuVO.name}}
						</view>
						<view class="">
							X<span>{{detailObj.count}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="order">
				<view class="title">
					订单详情
				</view>
				<view class="time">
					<view class="time_item">
						<span style="color: #999;">接单时间：</span><span>{{detailObj.createTime}}</span>
					</view>
					<view class="time_item">
						<span style="color: #999;">完成时间：</span><span>{{detailObj.updateTime}}</span>
					</view>
					<view class="time_item">
						<span style="color: #999;">奖励明细：</span><span>¥{{detailObj.reward}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getById } from '@/api/user.js'
		export default {
			data() {
				return {
					detailObj: {}
				}
			},
			onLoad(options) {
				this.id = options.id || ''
				getById({barRiderOrderId: this.id}).then(res => {
					this.detailObj = res.data
				})
			},
		}
</script>

<style lang="scss" scoped>
	.pending-orders{
		padding: 20rpx;
		background-color: #F7F8FA;
		display: flex;
		flex-direction: column;
		height: 97vh;
		.box{
			flex: 1;
			flex-grow: grow;
			overflow: auto;
			.address{
				padding: 40rpx 20rpx;
				background-color: #fff;
				.address_map{
					text-align: center;
					.code{
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}
					.code_title{
						margin: 10rpx 0;
						font-size: 26rpx;
					}
					.map{
						width: 675rpx;
						height: 675rpx;
						background-color: pink;
					}
				}
				.pick-up_address{
					font-size: 26rpx;
					margin: 20rpx 0;
					.pick-up{
						color: #FF0000;
					}
					.ads{
						margin: 10rpx 0;
						line-height: 50rpx;
					}
				}
				.shipping_address{
					font-size: 26rpx;
					.shipping{
						color: #FFBF00;
					}
					.ads{
						margin: 10rpx 0;
						line-height: 50rpx;
					}
				}
				.user{
					font-size: 26rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
			.shop{
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				font-size: 26rpx;
				.shop_title{
					margin-bottom: 20rpx;
				}
				.shop_content{
					display: flex;
					justify-content: space-between;
					padding: 12rpx 0;
				}
			}
			.order{
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				font-size: 26rpx;
				.title{
					margin-bottom: 20rpx;
				}
				.time{
					.time_item{
						margin: 15rpx 0rpx;
					}
				}
			}
		}
	}
</style>